<template>
    <div class="lua-toolbar">
        <div class="toolbar-left">
            <a-button-group>
                <a-button size="small" @click="$emit('new-file')">
                    <a-icon type="file-add" />
                    新建
                </a-button>
                <a-button size="small" @click="$emit('save-file')">
                    <a-icon type="save" />
                    保存
                </a-button>
                <a-button size="small" @click="$emit('load-file')">
                    <a-icon type="folder-open" />
                    打开
                </a-button>
            </a-button-group>
      
            <a-divider type="vertical" />
      
            <a-button-group>
                <a-button size="small" :disabled="!canUndo" @click="$emit('undo')">
                    <a-icon type="undo" />
                </a-button>
                <a-button size="small" :disabled="!canRedo" @click="$emit('redo')">
                    <a-icon type="redo" />
                </a-button>
            </a-button-group>
      
            <a-divider type="vertical" />
      
            <a-dropdown>
                <a-button size="small">
                    <a-icon type="code" />
                    模板 <a-icon type="down" />
                </a-button>
                <a-menu slot="overlay" @click="handleTemplateSelect">
                    <a-menu-item v-for="template in templates" :key="template.key">
                        {{ template.name }}
                    </a-menu-item>
                </a-menu>
            </a-dropdown>
        </div>
    
        <div class="toolbar-right">
            <a-select 
                v-model="selectedTheme" 
                size="small"
                style="width: 120px; margin-right: 8px;" 
                @change="$emit('theme-change', $event)"
            >
                <a-select-option v-for="theme in themes" :key="theme.value" :value="theme.value">
                    {{ theme.name }}
                </a-select-option>
            </a-select>
      
            <a-input-number
                v-model="fontSize"
                :min="10"
                :max="24"
                size="small"
                style="width: 70px; margin-right: 8px;"
                @change="$emit('font-size-change', $event)"
            />
      
            <a-button type="primary" size="small" @click="$emit('run-code')">
                <a-icon type="play-circle" />
                运行
            </a-button>
        </div>
    </div>
</template>

<script>
import { getTemplateList } from '../utils/luaTemplates'
import { themes } from '../utils/aceConfig'

export default {
    name: 'LuaToolbar',
    props: {
        canUndo: {
            type: Boolean,
            default: false
        },
        canRedo: {
            type: Boolean,
            default: false
        },
        currentTheme: {
            type: String,
            default: 'ace/theme/monokai'
        },
        currentFontSize: {
            type: Number,
            default: 14
        }
    },
    data() {
        return {
            templates: getTemplateList(),
            themes: themes,
            selectedTheme: this.currentTheme,
            fontSize: this.currentFontSize
        }
    },
    watch: {
        currentTheme(newVal) {
            this.selectedTheme = newVal
        },
        currentFontSize(newVal) {
            this.fontSize = newVal
        }
    },
    methods: {
        handleTemplateSelect({ key }) {
            this.$emit('template-select', key)
        }
    }
}
</script>

<style scoped>
.lua-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: #fafafa;
    border-bottom: 1px solid #e8e8e8;
    flex-shrink: 0; /* 防止在flex布局中被压缩 */
}
.toolbar-left {
    display: flex;
    align-items: center;
}
.toolbar-right {
    display: flex;
    align-items: center;
}
.ant-divider-vertical {
    margin: 0 8px;
}
</style>